<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="wap_reset2016.css">
	<script src="zepto.min.js"></script>
	<script src="adaptive-version2.js"></script>
	<script>
	window['adaptive'].desinWidth = 750;
	window['adaptive'].baseFont = 24;
	window['adaptive'].init();
	</script>	
<style>
	body{background: #2a2a2a;}
	.prize_box {position: relative;margin-top:6rem;}
	.prize_box ul {display: table;width: 100%;margin-top: 2rem;}
	.prize_box ul li {display: table-cell;width: 33%;vertical-align:middle;}
	.prize {width: 1.2rem;height: 1.2rem;background: #f80;margin: 0 auto;
				transition:all .5s ease-out;
		-webkit-transition:all .5s ease-out;
	}
	.claw {width: 1.2rem;position: absolute;z-index:10;top:0;left:50%;margin-left:-0.6rem;
				transition:all .3s ease-out;
		-webkit-transition:all .3s ease-out;
	}
	.claw .a {width: 0.2rem;height:0.8rem;background: #5349ab;margin: 0 auto;
				transition:height .5s ease-out;
		-webkit-transition:height .5s ease-out;
	}
	.claw .b {width: 1.2rem;height:1.2rem;background: #5349ab;}
</style>	
</head>
<body>
	<div class="claw">
		<div class="a"></div>
		<div class="b"></div>
	</div>
	<div class="prize_box">
		<ul>
			<li><div class="prize prize_1"></div></li>
			<li><div class="prize prize_2"></div></li>
			<li><div class="prize prize_3"></div></li>
		</ul>
		<ul>
			<li><div class="prize prize_4"></div></li>
			<li><div class="prize prize_5"></div></li>
			<li><div class="prize prize_6"></div></li>
		</ul>
	</div>
</body>
<script>
$(function(){
	move = true;//移动
	odds = true;//几率
	var claw = $('.claw');
	var clawH = claw.find('.a');
	var claw_a = claw.find('.a').height();
	var claw_b = claw.find('.b').height();
	var obj = $('.prize');
	obj.bind('touchstart',function(){
		var _this = $(this);
		if(move){
			var p_t = _this.offset().top;
			var p_l = _this.offset().left;
			var c_l = claw.offset().left;
			var moveX = p_l - c_l;
			var moveY = p_t - claw_b;
			var num = obj.index(this);//当前选择的奖品
			console.log(p_t,p_l,c_l);
			//console.log(num);
			if(num !== 1 && num !== 4){//排除中间2个
				claw.css({"-webkit-transform":"translate3d(" + moveX + "px,0,0)"});
				setTimeout(function(){
					clawH.css({height:moveY + "px"});
					setTimeout(function(){
						clawH.css({height:claw_a + "px"});
					},500)
				},300)
				oddsEvent(800);
			}else{
				clawH.css({height:moveY + "px"});
				setTimeout(function(){
					clawH.css({height:claw_a + "px"});
				},500)
				oddsEvent(500);
			}
		}
		move = false;//只抓一次
		function oddsEvent(time){//抓取成功失败事件
			if(odds){
				console.log('抓到啦！o(∩_∩)o 哈哈')
				setTimeout(function(){
					_this.css({"-webkit-transform":"translate3d(0,-" + (moveY-claw_a) + "px,0)"});
				},time)
			}else{
				console.log('没抓到(┬＿┬)')
			}		
		}	
	})
})
</script>
</html>